<!-- 个人中心 -->
<template>
	<view class="container">
		<view class="order-nav u-flex">
			<view class="nav-item u-flex-col u-flex-1 u-row-center u-col-center" v-for="nav in groupState" :key="nav.id"
				@tap="onNav(nav.id)">
				<view class="item-title" :class="{ 'item-title-active': stateId === nav.id }">{{ nav.name }}</view>
				<text class="nav-line" :class="{ 'line-active': stateId === nav.id }"></text>
			</view>
		</view>
		<view class="order-data">
			<view v-for="item in dataList">
				<view class="order-item" @click="detail(item.id)">
					<view class="top">
						<view>

							<image style="width: 188rpx;height: 135rpx;"
								:src="'https://huboshizb.bigchun.com'+item.image"></image>
						</view>
						<view class="top1">
							<view class="toptitle">{{item.title}}</view>
							<view class="topcontent">{{item.explain?item.explain:''}}</view>
							<!-- <view v-html="item.info" class="topcontent"></view> -->
						</view>
					</view>
					<view class="bot">
						<view class="bottime">{{item.createtime | formatTime}}</view>
						<view class="botbox">
							<view class="botItem" @click.stop="dianzan(item.id)">

								<image v-if="!item.is_fabulous" style="width: 26rpx;height: 26rpx;"
									src="../../static/image/fenxiao69.png"></image>
								<image v-else style="width: 26rpx;height: 26rpx;" src="../../static/image/zanh.png">
								</image>
								<view class="botnum">{{item.fabulous_sum}}</view>
							</view>
							<view class="botItem" @click.stop="submit(item.id)">
								<image style="width: 26rpx;height: 26rpx;" src="../../static/image/fenxiao70.png">
								</image>
								<view class="botnum">{{item.comment_sum}}</view>
							</view>
							<view class="botItem" @click.stop="shoucang(item.id)">

								<image v-if="!item.is_collection" style="width: 26rpx;height: 26rpx;"
									src="../../static/image/fenxiao71.png"></image>
								<image v-else style="width: 26rpx;height: 26rpx;" src="../../static/image/cangh.png">
								</image>
								<view class="botnum">{{item.collection_sum}}</view>
							</view>
							<view class="botItem" @click.stop="openItem(item.id)">
								<image style="width: 26rpx;height: 26rpx;" src="../../static/image/fenxiao72.png">
								</image>
								<view class="botnum">{{item.reward_sum}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view>
			<uni-popup ref="popup" type="center">
				<view class="pop">
				</view>
			</uni-popup>

		</view>
		<u-popup :mask="true" v-model="show" mode="center" @close="close" @open="open">
			<view style="background-color: #FFFFFF;border-radius: 20px;width: 50vw;padding-bottom: 40rpx;">
				<view style="line-height: 40px;background-color: #eeeeee;text-align: center;
            		    border-top-left-radius: 20px;
            			border-top-right-radius: 20px;">打赏金额</view>
				<view style="margin: 20px;display: flex; align-items: center;">
					<u-input placeholder="请输入" border="surround" type="number" clearable v-model="reward_money"
						style="width: 150rpx;margin: auto;">
					</u-input>
					<view style="margin-left: 20rpx;">元</view>
				</view>
				<view @click="reward()"
					style="margin: 20px;;line-height: 30px;color: #FFFFFF;margin: auto;text-align: center;width: 100px;border-radius: 20px;background-color: #ff0000;">
					确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		filters: {
			formatTime(val) {
				const date = new Date(val * 1000)
				var y = date.getFullYear() // 年份
				var m = date.getMonth() + 1 // 月份，注意：js里的月要加1
				var d = date.getDate() // 日
				// 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了 
				return y + '-' + m + '-' + d
			}
		},
		data() {
			return {
				reward_money: "",
				show: false,
				groupState: [{
						id: '1',
						title: '全部'
					},
					{
						id: '2',
						title: '钻石类	'
					},
					{
						id: '3',
						title: '翡翠类'
					},
					{
						id: '4',
						title: '玛瑙 '
					},
					{
						id: '5',
						title: '琥珀 '
					}
				],
				dataList: [],
				stateId: 1,
				page: 1,
				comment: '',
				article_id: '',
				dianzanFirst: true,
				shoucangFirst: true
			};

		},
		onLoad() {
			this.getType()

		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			console.log('已触底');
			this.page++
			this.getData()
		},
		computed: {

		},
		onPullDownRefresh() {
			// this.getData()
		},
		methods: {
			detail(id) {
				uni.navigateTo({
					url: '/pages/jewel/informationdetail?id=' + id
				})
			},
			submit(id) {
				// let that = this
				// uni.request({
				// 	url: 'https://huboshizb.bigchun.com/api/info/comment', //仅为示例，并非真实接口地址。
				// 	method: 'POST',
				// 	data: {
				// 		article_id: id,
				// 		comment: '评论'
				// 	},
				// 	success: (res) => {
				// 		console.log('评论res', res)
				// 	}
				// });
			},
			getType() {
				this.$api.infoSort().then(res => {
					this.groupState = res.data
					if (res.data) {
						if (this.groupState.length > 0) {
							this.stateId = this.groupState[0].id
						}
					}
				})
			},
			commentopen(id) {
				this.$refs.popup.open('center')
				this.article_id = id
			},
			onNav(id) {
				if (this.stateId !== id) {
					this.stateId = id;
				}
				this.getData()
			},
			//点赞
			dianzan(id) {
				let that = this

				this.$api.fabulous({
					article_id: id
				}).then(res => {
					this.$u.toast(res.msg);
					this.dianzanFirst = false
					this.getData()
				})
				return
				if (this.dianzanFirst) {

					this.$api.fabulous({
						article_id: id
					}).then(res => {
						this.$u.toast(res.msg);
						this.dianzanFirst = false
						this.getData()
					})
				} else {
					this.$u.toast('已点赞');
				}
			},
			shoucang(id) {
				this.$api.collection({
					article_id: id
				}).then(res => {
					this.$u.toast(res.msg);
					this.shoucangFirst = false
					this.getData()
				})

				return
				let that = this
				if (this.shoucangFirst) {

					this.$api.collection({
						article_id: id
					}).then(res => {
						this.$u.toast('收藏成功');
						this.shoucangFirst = false
						this.getData()
					})

				} else {
					this.$u.toast('已收藏');
				}
			},
			getData() {

				this.$api.info_collection({
					type: this.stateId
				}).then(res => {
					this.dataList = res.data
				})
			},
			openItem(id) {
				console.log(this.show, id);
				this.article_id = id
				this.show = true
			},
			//打赏
			reward() {

				this.$api.reward({
					article_id: this.article_id,
					reward_money: this.reward_money,
					method: "wap"
				}).then(res => {

					if (res.code == 1) {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: rest => {
								this.$u.toast('打赏成功！');
								this.reward_money = ""
								this.getData()
							},
							fail: err => {
								console.log(err);
								if (err.errMsg = "requestPayment:fail cancel") {
									this.$u.toast('取消支付');
								} else {
									this.$u.toast('支付失败');
								}

							}
						});
						// #endif
					}
				})
				this.show = false
				return

				let that = this
				uni.request({
					url: 'https://huboshizb.bigchun.com/api/info/reward', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						article_id: this.article_id,
						reward_money: this.reward_money,
						method: "wap"
					},
					success: (res) => {
						console.log('打赏res', res)
						uni.showToast({
							title: '打赏成功'
						})
						that.reward_money = ""
						that.dataList = []
						that.getData()

					}
				});
				this.show = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.order-nav {
		background: #fff;
		height: 80rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				line-height: 76rpx;
			}

			.item-title-active {
				color: #333333;
				font-weight: bold;
			}

			.nav-line {
				width: 80rpx;
				height: 4rpx;
				background: #fff;
			}

			.line-active {
				background: #de2415;
			}
		}
	}

	.order-data {
		padding: 0rpx 30rpx 30rpx 30rpx;
	}

	.top {
		display: flex;
		margin-top: 36rpx;
	}

	.order-item {
		border-top: 1px solid #eeeeee;
		margin-top: 36rpx;
	}

	.bot {
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.botItem {
		display: flex;
		margin-left: 36rpx;
		align-items: center;
	}

	.botbox {
		display: flex;
		align-items: center;
	}

	.toptitle {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.topcontent {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;

		font-size: 24rpx;
		color: #999999;

		width: 500upx;
		margin-top: 20upx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		// text-align: justify;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.top1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
	}

	.bottime {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #cccccc;
	}

	.botnum {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #cccccc;
		margin-left: 8rpx;
	}

	.pop {
		width: 800rpx;
		height: 300rpx;
		background: #ffffff;
	}
</style>
